<template>
  <view class="w-full min-h-screen bg-[#f0f0f0]">
    <!-- 顶部背景图 -->
    <view class="relative w-full h-[200rpx]">
      <!-- <image
        :src="topImage"
        mode="aspectFill"
        class="w-full h-full"
      /> -->
      <view class="absolute inset-0 flex flex-col justify-center items-center bg-[#ff9900]">
        <text class="text-white text-[40rpx] font-bold mb-[20rpx]">预约详情</text>
        <text class="text-white text-[32rpx]">订单号: {{ orderId }}</text>
      </view>
    </view>

    <!-- 详情内容区域 -->
    <view class="w-full mx-auto px-[40rpx] py-[40rpx] box-border bg-white  relative z-1">
      <!-- 预约人信息 -->
      <view class="mb-[40rpx]">
        <view class="flex items-center mb-[20rpx]">
          <text class="text-[28rpx] text-gray-800 font-medium">预约人</text>
        </view>
        <view class="w-full px-[24rpx] py-[20rpx] text-[28rpx] border border-gray-200 rounded-[8rpx] box-border bg-[#f9f9f9]">
          {{ formData.name || '未填写' }}
        </view>
      </view>

      <!-- 手机号 -->
      <view class="mb-[40rpx]">
        <view class="flex items-center mb-[20rpx]">
          <text class="text-[28rpx] text-gray-800 font-medium">手机号</text>
        </view>
        <view class="w-full px-[24rpx] py-[20rpx] text-[28rpx] border border-gray-200 rounded-[8rpx] box-border bg-[#f9f9f9]">
          {{ formData.phone || '未填写' }}
        </view>
      </view>

      <!-- 所在区域 -->
      <view class="mb-[40rpx]">
        <view class="flex items-center mb-[20rpx]">
          <text class="text-[28rpx] text-gray-800 font-medium">所在区域</text>
        </view>
        <view class="w-full px-[24rpx] py-[20rpx] text-[28rpx] border border-gray-200 rounded-[8rpx] box-border bg-[#f9f9f9]">
          {{ formData.region.join(' ') || '未选择' }}
        </view>
      </view>

      <!-- 详细地址 -->
      <view class="mb-[40rpx]">
        <view class="flex items-center mb-[20rpx]">
          <text class="text-[28rpx] text-gray-800 font-medium">详细地址</text>
        </view>
        <view class="w-full px-[24rpx] py-[20rpx] text-[28rpx] border border-gray-200 rounded-[8rpx] box-border bg-[#f9f9f9] min-h-[84rpx]">
          {{ formData.address || '未填写' }}
        </view>
      </view>

      <!-- 备注信息 -->
      <view class="mb-[40rpx]">
        <view class="flex items-center mb-[20rpx]">
          <text class="text-[28rpx] text-gray-800 font-medium">备注</text>
        </view>
        <view class="w-full px-[24rpx] py-[20rpx] text-[28rpx] border border-gray-200 rounded-[8rpx] box-border bg-[#f9f9f9] min-h-[120rpx]">
          {{ formData.remark || '无备注信息' }}
        </view>
      </view>

      <!-- 上传图片 -->
      <view class="mb-[60rpx]">
        <view class="flex items-center mb-[20rpx]">
          <text class="text-[28rpx] text-gray-800 font-medium">上传图片</text>
        </view>
        <view class="w-full box-border border-2 p-1 border-gray-300 rounded-[8rpx] bg-[#f9f9f9]">
          <view v-if="formData.images && formData.images.length > 0" class="flex flex-col gap-2">
            <view v-for="(img, index) in formData.images" :key="index">
              <image :src="img" mode="widthFix" class="w-full" @click="previewImage(index)"></image>
            </view>
          </view>
          <view v-else class="py-8 flex flex-col items-center justify-center">
            <text class="text-gray-400 text-[24rpx] py-[10rpx]">无上传图片</text>
          </view>
        </view>
      </view>

      <!-- 预约时间 -->
      <view class="mb-[60rpx]">
        <view class="flex items-center mb-[20rpx]">
          <text class="text-[28rpx] text-gray-800 font-medium">预约时间</text>
        </view>
        <view class="w-full px-[24rpx] py-[20rpx] text-[28rpx] border border-gray-200 rounded-[8rpx] box-border bg-[#f9f9f9]">
          {{ appointmentTime || '未指定时间' }}
        </view>
      </view>
    </view>

    <view class="w-full flex justify-center mt-4 pb-8" v-if="formData.status==1">
      <nut-button 
        class="!w-[200rpx]"
        type="primary"
        @tap="jump"
      >
        去评估
      </nut-button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import Taro from '@tarojs/taro'
// import topImage from '@/assets/imgs/top.png';
// import { showToast, showModal } from '@nutui/nutui-taro'
const info = Taro.getStorageSync('orderInfo')
// 模拟表单数据
const formData = ref({
  status: info.status,
  name: info.name,
  phone: info.telephone,
  region: [info.province, info.city, info.district],
  address: info.address,
  remark: info.remark,
  images: info.pic ? [info.pic] : []
})
//  Taro.setStorageSync('orderInfo', props.item)


// 订单号
const orderId = ref(info.orderno)

// 预约时间
const appointmentTime = ref(info.createtime)

// 图片预览
const previewImage = (index) => {
  if (!formData.value.images || formData.value.images.length === 0) return
  
  Taro.previewImage({
    current: formData.value.images[index],
    urls: formData.value.images
  })
}

function jump(){
    Taro.navigateTo({
        url: '/pages/order/evaluate?orderno=' + info.orderno
    })
}

// 拨打电话
const callPhone = () => {
  if (!formData.value.phone) {
    // showToast({
    //   title: '暂无联系电话',
    //   icon: 'none'
    // })
    return
  }
  
//   showModal({
//     title: '拨打电话',
//     content: `是否拨打 ${formData.value.phone}？`,
//     success: (res) => {
//       if (res.confirm) {
//         Taro.makePhoneCall({
//           phoneNumber: formData.value.phone
//         })
//       }
//     }
//   })
}

// 返回列表
const goBack = () => {
  Taro.navigateBack()
}

// 从URL获取订单ID
const getOrderIdFromUrl = () => {
  const option = Taro.getLaunchOptionsSync().query
  return option.orderId || orderId.value
}

// 加载订单详情
const loadOrderDetail = async (orderId) => {
  try {
    // 这里模拟从API获取订单详情
    // const res = await http.get(`/order/${orderId}`)
    // formData.value = res.data
    
    // 实际开发中取消下面的模拟数据
    // formData.value = res.data
  } catch (error) {
    console.error('获取订单详情失败:', error)
    // showToast({
    //   title: '获取订单详情失败',
    //   icon: 'none'
    // })
  }
}

onMounted(() => {
//   const orderId = getOrderIdFromUrl()
//   loadOrderDetail(orderId)
})
</script>

<style lang="scss">
/* 重置按钮默认样式 */
button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  line-height: 1;
}

button::after {
  border: none;
}

/* 确保输入框在微信小程序中显示正确 */
input, picker {
  background-color: transparent;
  height: auto;
  min-height: auto;
  line-height: normal;
}

.taro-textarea {
  background-color: transparent;
}

/* 图片预览样式 */
.image-preview {
  width: 100%;
  height: auto;
  max-height: 300rpx;
  object-fit: contain;
}
</style>